<template>
    <div class="page anchor-point">
        <div class="weui-header bg-green" style="position: fixed;top: 0; width: 100%;z-index: 500;">    
           <!--  <div class="weui-header-left">
                <a @click="onChangeDisplay()">
                    <svg class="icon white" aria-hidden="true">
                        <use xlink:href="#icon-error"></use>
                    </svg>
                </a>
            </div>          -->
            <h1 class="weui-header-title">{{titleMsg}}</h1>
            <div class="weui-header-right">
                <a @click="onEndTest()">{{btnText}}</a>
            </div>
        </div>
        <div style="height:50px"></div>       

        <div class="scroll-content"  >
            <div v-for="question,index in questions" class="scroll-item" :key="question.QUESTION_ID" >

                <div class="weui-article">
                    <section>

                        <h2 class="title">
                            {{index+1}} . {{question.TITLE}}  
                            <span  v-if="isShowAnswer" >
                                <span class="red"   v-if="checkAnswer(question.USER_ANSWER,question.ANSWER)"> √  </span>
                                <span class="red"   v-else > ×  </span>
                            </span>
                        </h2>
                        
                        <section>
                            <!--<h3>1.1 节标题</h3>-->
                            <p class="weui-a11y-combo" v-show="question.DESCRIPTION">
                              <span  id="txt1"  class="weui-a11y-combo__content"  aria-hidden="true">
                                {{question.DESCRIPTION}}
                              </span> 
                            </p>
                            <p class="question-img-wrap" v-show="question.IMAGE_URL">
                                <img v-if="question.IMAGE_URL!=null" v-bind:src="question.IMAGE_URL" >
                            </p> 
                        </section>
                    </section>


<!-- 单选 -->
                <div class="weui-cells__title">{{question.QUESTION_TYPE}}</div>

                <div class="weui-cells__group weui-cells__group_form" v-if="question.QUESTION_TYPE=='单选题'">
                    <div class="weui-cells weui-cells_radio">
                        <label v-for="el in question.OPTIONS" :key="el.OPTION_CODE" class="weui-cell weui-cell_active weui-check__label" v-bind:for="question.SERIAL_NO+'_'+el.OPTION_CODE" >
                            <div class="weui-cell__bd">
                                <p>{{el.OPTION_CODE}}.{{el.CONTENT}}</p>
                            </div>
                            <div class="weui-cell__ft">
                                <input type="radio" class="weui-check"  v-bind:name= 'question.SERIAL_NO+"_radio1"'    v-bind:id="question.SERIAL_NO+'_'+el.OPTION_CODE" v-model="question.USER_ANSWER" v-bind:value="el.OPTION_CODE"/>
                                <span class="weui-icon-checked"></span>
                            </div>
                        </label>
                    </div>
                </div>
                
                <!-- 判断题 -->
                <div class="weui-cells__group weui-cells__group_form" v-if="question.QUESTION_TYPE=='判断题'">
                    <div class="weui-cells weui-cells_radio">
                        <label v-for="el in question.OPTIONS" :key="el.OPTION_CODE" class="weui-cell weui-cell_active weui-check__label" v-bind:for="question.SERIAL_NO+'_'+el.OPTION_CODE" >
                            <div class="weui-cell__bd">
                                <p>{{el.OPTION_CODE}}.{{el.CONTENT}}</p>
                            </div>
                            <div class="weui-cell__ft">
                                <input type="radio" class="weui-check" v-bind:name= 'question.SERIAL_NO+"_radio2"'   v-bind:id="question.SERIAL_NO+'_'+el.OPTION_CODE" v-model="question.USER_ANSWER" v-bind:value="el.OPTION_CODE"/>
                                <span class="weui-icon-checked"></span>
                            </div>
                        </label>
                    </div>
                </div>

                <!-- 多选 -->
                <div class="weui-cells__group weui-cells__group_form" v-if="question.QUESTION_TYPE=='多选题'">
                    <div class="weui-cells weui-cells_checkbox">
                        <label v-for="el in question.OPTIONS" :key="el.OPTION_CODE" class="weui-cell weui-cell_active weui-check__label" v-bind:for='question.SERIAL_NO+"_"+el.OPTION_CODE'>
                            <div class="weui-cell__bd">
                                <p>{{el.OPTION_CODE}}.{{el.CONTENT}}</p>
                            </div>
                            <div class="weui-cell__ft">
                    <input  type="checkbox" class="weui-check"    v-bind:id='question.SERIAL_NO+"_"+el.OPTION_CODE' v-model="question.USER_ANSWER" v-bind:value="el.OPTION_CODE" />
                                <i class="weui-icon-checked"></i>
                            </div>
                        </label>
                    </div>
                </div>  

                 <div class="button-sp-area cell"  >
                    <a href="javascript:" role="button" v-if="isShowAnswer"  class="weui-btn_cell weui-btn_cell-warn weui-btn_cell-default">
                        <span v-bind:class="{'green' : checkAnswer(question.USER_ANSWER,question.ANSWER) ,'red' : !checkAnswer(question.USER_ANSWER,question.ANSWER) }" >您的答案：{{question.USER_ANSWER | toString }} ,</span>
                        &nbsp;&nbsp;<span class="green" >正确答案：{{question.ANSWER}} </span>
                    </a>
                </div>

                </div>

            
                

            </div>
        </div>


       
        <div class="js_dialog" role="dialog"  v-if="isShowResultDialog" aria-hidden="true" aria-modal="true" aria-labelledby="js_title2" >
            <div class="weui-mask" ></div>
            <div class="weui-dialog">
                <div class="weui-dialog__hd">
                  <strong class="weui-dialog__title" id="js_title1">测验结果</strong>
                </div>
                <div class="weui-dialog__bd">
                  
                    <div class="weui-cells">
                        <div role="option" class="weui-cell ">
                            <div class="weui-cell__bd">
                                <p class="text-left">题目数量</p>
                            </div>
                            <div class="weui-cell__ft">{{questions.length}}</div>
                        </div>
                        <div role="option" class="weui-cell ">
                            <div class="weui-cell__bd">
                                <p class="text-left">回答正确</p>
                            </div>
                            <div class="weui-cell__ft">{{resultOkNum}}</div>
                        </div>
                        <div role="option" class="weui-cell ">
                            <div class="weui-cell__bd">
                                <p class="text-left">回答错误</p>
                            </div>
                            <div class="weui-cell__ft">{{resultErrorNum}}</div>
                        </div>
                       <!--<div role="option" class="weui-cell ">
                            <div class="weui-cell__bd">
                                <p class="text-left">总分</p>
                            </div>
                            <div class="weui-cell__ft">{{questions.length}}</div>
                        </div> -->
                    </div>

                </div>
                <div class="weui-dialog__ft">
                 <a role="button" href="javascript:" class="weui-dialog__btn weui-dialog__btn_primary" v-on:click="onShowAnswer()">查看答案</a>
                </div>
            </div>
        </div>

        <div class="actionsheet">
            <div class="weui-mask" id="iosMask" style="opacity: 0; display: none;" wah-hotarea="click"></div>
            <div role="dialog" aria-modal="true" tabindex="0" aria-hidden="true" class="weui-actionsheet" id="iosActionsheet">
                <div class="weui-actionsheet__title">
                    <p class="weui-actionsheet__title-text">这是一个标题，可以为一行或者两行。</p>
                </div>
                <div class="weui-actionsheet__menu">
                    <div id="current1" tabindex="0" role="button" class="weui-actionsheet__cell">示例菜单</div>
                    <div role="button" tabindex="0" class="weui-actionsheet__cell">示例菜单</div>
                    <div role="button" tabindex="0" class="weui-actionsheet__cell weui-actionsheet__cell_warn">负向菜单</div>
                </div>
                <div class="weui-actionsheet__action">
                    <div role="button" tabindex="0" class="weui-actionsheet__cell" id="iosActionsheetCancel" wah-hotarea="click">取消</div>
                </div>
            </div>
        </div>
        
    </div>
</template>
<style type="text/css" scoped>
    
    .page{
        background: #efefef;
    }

    .anchor-point {
        flex-basis: 100%;
        display: flex;
        overflow: hidden;
    }

    .anchor-point .scroll-content {
      margin-top: 40px;
      height: 96%;
      width: 100%;
      overflow-y: scroll;
    }
        
    .anchor-point .scroll-item{
            background: #fff;
            margin:10px ;
            border-radius: 6px;
    }    
    .page__hd__time{
        margin-right: 40px;
        color: #395740;
        font-size: 18px;
        font-weight: 500;
    }
    .page__hd {
        padding: 12px;
        border-bottom: 1px solid #97b979;
        text-align: right;
        background: #c2e0c9;
    }
    .end-test-btn {
        font-size: 16px;
        font-weight: 400;
    }
    .text-left{
        text-align: left;
    }
    .red{
        color: red;
    }
    .green{
        color: green;
    }
</style>
<script>
 
export default {
   
    data () {
        return {
            pageTotal : 100 ,
            currectPage : 0 ,
            questions : []  ,
            testTime : 60   ,
            timer : null    ,
            titleMsg : '点击按钮开始测验',
            btnText  : "开始测验",
            isShowResultDialog : false ,
            resultOkNum    : 0    ,
            resultErrorNum : 0    ,
            isShowAnswer   : false,
            pageList       : [] ,
            isTestFinish   : false,
            statu:0 ,
            displayType:'list',
            activeStep :0
        }
    },
    filters: {
        toString: function (value) {
        
            if(typeof value =='string'){
                return value;
            }else if(typeof value =='object'){
                return value.sort().join('')
            }else{
                return value;
            }   

        }
    },
    methods: {
        init(){
            var createTestRequest = this.$store.state.createTestRequest;
            this.testTime = createTestRequest.TEST_TIME * 60;
            if(createTestRequest.QUESTIONS.length!=0){
                
                this.questions        = createTestRequest.QUESTIONS ;
                
                for(var i=0;i<this.questions.length;i++){
                    if(this.questions[i].QUESTION_TYPE=='判断题' || this.questions[i].QUESTION_TYPE=='单选题'){
                        this.questions[i].USER_ANSWER = '';
                    }else if (this.questions[i].QUESTION_TYPE=='多选题'){
                        this.questions[i].USER_ANSWER = [];
                    }
                }

                this.pageTotal        = this.questions.length;

                // this.question         = this.questions[this.currectPage];

                this.timer = setInterval(this.countDown, 1000);
                
            }
            else{

                //回退到选择范围
                this.$weui.alert("当前并没有测试");
                this.pageTotal=0;
            }
        },
        onChangeDisplay(){

        },
        onShowAnswer(){
            this.isShowAnswer       = true;
            this.isShowResultDialog = false;
        },
        onPrePage(){
             
            if(this.currectPage<=0 ){
                 return;
            }
            this.currectPage--;
            this.goAnchor(this.currectPage)
            // this.question = this.questions[this.currectPage];
        },
        onNextPage(){
            
            if(this.currectPage>=this.pageTotal-1) {
                return;
            }
            this.currectPage++;

            this.goAnchor(this.currectPage)
            // this.question = this.questions[this.currectPage];
        },
        onEndTest(){

            if(this.btnText=="结束"){
                this.$weui.confirm('确认结束测试？', () => {
                    this.isTestFinish = true;
                    this.endTest();
                    this.statu = 2 ;
                }, ()=> {
                });
            }else if(this.btnText=="结果"){
               this.isShowResultDialog = true;
            }

        },
        endTest(){
            this.isTestFinish = true;
            clearInterval(this.timer);
            this.titleMsg = "测验结束";
            this.btnText="结果";
            this.computTest();
            this.isShowResultDialog = true;
        },
        computTest(){

            for (var i=0;i<this.questions.length;i++) {
                
                if(this.questions[i].USER_ANSWER!='' ||this.questions[i].USER_ANSWER.length!=0 ){

                    var answer = '';

                    if(typeof this.questions[i].USER_ANSWER =='string'){

                        answer = this.questions[i].USER_ANSWER;

                    }else if(typeof this.questions[i].USER_ANSWER =='object'){

                        answer = this.questions[i].USER_ANSWER.sort().join('');

                    }

                    answer =answer ?  answer.toUpperCase().replace(/\s*/g,"") : '1';

                    var qa = this.questions[i].ANSWER  ?  this.questions[i].ANSWER.toUpperCase().replace(/\s*/g,"") :  '-1';

                    if( answer == qa ){
                 
                        this.resultOkNum++ ;
                      
                    }else{
                        this.resultErrorNum++ ;
                    }

                }else{
                    this.resultErrorNum++ ;
                }

            }

        },
        //this.checkAnswer(answer , qa)
        checkAnswer(a,b){

            var res = true;

            if(a.length==b.length){

                for(var i=0;i<a.length;i++){

                    if(b.indexOf(a[i])==-1){
                        res = false;
                    }

                }

            }else{
                res = false;
            }

            return res ;

        },
        onSelectPage(){
            this.pageList = []
            if(this.isTestFinish){

                for (var i=0;i<this.questions.length;i++) {
                   
                    var obj ={};

                    if(this.questions[i].USER_ANSWER!='' ||this.questions[i].USER_ANSWER.length!=0 ){
                       
                        var answer = '';

                        if(typeof this.questions[i].USER_ANSWER =='string'){
                            answer = this.questions[i].USER_ANSWER;
                        }else if(typeof this.questions[i].USER_ANSWER =='object'){
                            answer = this.questions[i].USER_ANSWER.sort().join('');
                        }

                        answer = answer?  answer.toUpperCase().replace(/\s*/g,"") : '1';

                        var qa =  this.questions[i].ANSWER ? this.questions[i].ANSWER.toUpperCase().replace(/\s*/g,"")  : '-1' ; 

                        if(answer == qa){

                            obj = {
                                label : "第"+(i+1)+"题  <span style='color:green'>√</span>",
                                value :  i
                            };
                           
                        }else{
                            
                            obj = {
                                label : "第"+(i+1)+"题 <span style='color:#ff0000'>×</span>",
                                value : i
                            };

                        }
                        this.pageList.push(obj);

                    }else{

                         obj = {
                            label : "第"+(i+1)+"题 <span style='color:#ff0000'>×</span>",
                            value : i
                        };
                        this.pageList.push(obj);

                    }

                }


            }else{

                this.pageList = [];

                for (var j = 0; j < this.pageTotal; j++) {
                     if(this.questions[j].USER_ANSWER!='' ||this.questions[j].USER_ANSWER.length!=0 ){
                        this.pageList.push({
                            label : "<span style='color:#1c92f6'>第"+(j+1)+"题</span>",
                            value : j
                        });
                     }else{
                        this.pageList.push({
                            label : "第"+(j+1)+"题",
                            value : j
                        });
                     }
                  
                }

            }

            this.$weui.picker(this.pageList,{
                    onConfirm:(result)=>{
                        this.currectPage = result[0].value;
                        // this.question = this.questions[this.currectPage];
  
                    }
            });

        },
       
        startCountDown(){
            this.init();               
        },
        countDown(){
            
            if (this.testTime >= 0) {

                var minutes = Math.floor(this.testTime / 60);
                var seconds = Math.floor(this.testTime % 60);
                this.titleMsg = "剩余" + minutes + "分" + seconds + "秒";
             
                //if (testTime == 5 * 60)alert("距离结束仅剩5分钟");
                --this.testTime;
            } else{

                clearInterval(this.timer);

                this.titleMsg = "时间到，测验已结束!";
                
                this.endTest();
               
            }
        }
    },
    created  () {        
        document.title = "测验" ;
        //直接开始测试
        this.statu = 1 ;
        this.isTestFinish = false;
        this.startCountDown();
        this.btnText="结束";
    },
    destroyed () { 
        clearInterval(this.timer);
    }
}
</script>

<style>

</style>